<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>ECharts</title>
  <!-- 引入刚刚下载的 ECharts 文件 -->
  <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>

<body>
  <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
  <div id="main" style="width: 97vw; height: 97vh"></div>
  <script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById("main"));

    // 指定图表的配置项和数据
    var option = {
      backgroundColor: "#172238", // 保持深蓝背景
      title: {
        text: "采购实施进度趋势分析（单位：万元）",
        left: "center",
        textStyle: {
          color: "#E6F7FF",
          fontSize: 16,
        },
      },
      grid: {
        top: "10%", //距上边距
        left: "6%", //距离左边距
        right: "0%", //距离右边距
        bottom: "6%", //距离下边距
      },
      // 还差一个tootip
      legend: {
        top: 30,
        icon: "rect",
        itemWidth: 10, // 图标宽度
        itemHeight: 10, // 图标高度
        itemGap: 20, // 图例项间距
        textStyle: {
          color: "#8C9AB3",
          // 字比左侧图标大即可
          fontSize: 14,
          // lineHeight: 10, // 行高与图标高度一致
          padding: [1, 0, 0, 2], // 上右下左（微调对齐）
        },
        // 新增关键对齐参数
        //  align: "left",
        //   itemStyle: {
        //     verticalAlign: "middle", // 强制垂直居中
        //     borderWidth: 0,
        //   },
      },
      xAxis: {
        type: "category",
        //    boundaryGap: true,
        data: [
          "电网基建",
          "生产技改",
          "零星调查",
          "电网数据中心",
          "生产模建机改",
          "电力市场营销",
          "电网考核",
          "综合管理",
          "技术突破",
          "产业大修",
          "产业稳建机",
          "产业辅助技改",
        ],
        axisTick: {
          show: false,
        },
        axisLabel: {
          color: "#fff",
          fontSize: 20,
          interval: 0,
          formatter: function (value, index) {
            const arr = [
              [9348.23, 7391.21], // 电网基建
              [9348.23, 7391.21], // 生产技改
              [9348.23, 7391.21], // 零星调查
              [9348.23, 7391.21], // 电网数据中心
              [9348.23, 7391.21], // 生产模建机改
              [9348.23, 7391.21], // 电力市场营销
              [9348.23, 7391.21], // 电网考核
              [9348.23, 7391.21], // 综合管理
              [9348.23, 7391.21], // 技术突破
              [9348.23, 7391.21], // 产业大修
              [9348.23, 7391.21], // 产业稳建机
              [9348.23, 520.21]  // 产业辅助技改
            ];

            const data = arr[index];
            return `{num|${data[0]}}\n{day|${data[1] || ''}}`;
          },
          rich: {
            num: {
              color: '#333',
              fontSize: 14,
              padding: [0, 0, 5, 0] // 下边距为5px
            },
            day: {
              color: '#666',
              fontSize: 12
            }
          }
        },
      },
      yAxis: [
        {
          type: "log",
          name: "单位(万元)",
          max: 90000,
          // min: 10,
          nameTextStyle: {
            fontSize: "20px",
            padding: [0, 20, 20, 0],
            color: "#a2c5eb",
          },
          splitLine: {
            lineStyle: {
              type: "dashed", //虚线
              color: "#276164",
            },
            show: true, //隐藏
          },
          axisLabel: {
            margin: 20,
            textStyle: {
              color: "#a2c5eb",
              fontSize: 20,
            },
          },
          axisLine: {
            lineStyle: {
              color: "#436488",
              width: 1, //  改变坐标线的颜色
            },
          },
        },
      ],
      series: [
        // 年度计划申报金额（原蓝色柱）
        // {
        //   name: "年度计划申报金额",
        //   type: "line",
        //   smooth: true,
        //   // symbol: "circle",
        //   // symbolSize: 8,
        //   itemStyle: {
        //     normal: {
        //       label: {
        //         show: false, //开启显示数值
        //         position: "top", //数值在上方显示
        //         distance: 30,
        //         rotate: 60,
        //         offset: [25, 0],
        //         textStyle: {
        //           //数值样式
        //           color: "#fff", //字体颜色
        //           fontSize: 14, //字体大小
        //         },
        //       },
        //     },
        //     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        //       { offset: 0, color: "#79c1ff" },
        //       { offset: 0.5, color: "#54afff" },
        //       { offset: 1, color: "#2c9dfe" },
        //     ]),
        //   },
        //   data: [
        //     10550, 8500, 7500, 760, 890, 7600, 600, 8500, 7600, 5400, 8600,
        //     7600,
        //   ],
        // },
        {
          name: '年度计划申报金额',
          type: 'bar',
          stack: 'total',
          emphasis: {
            focus: 'series'
          },
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: "#79c1ff" },
              { offset: 0.5, color: "#54afff" },
              { offset: 1, color: "#2c9dfe" },
            ]),
          },
          data: [
            10550, 8500, 7500, 760, 890, 7600, 600, 8500, 7600, 5400, 8600,
            7600,
          ],
          barWidth: '50%', // 添加这一行来控制柱子宽度
        },

        // 综合计划金额（原黄色柱）
        // {
        //   name: "综合计划金额",
        //   type: "line",
        //   smooth: true,
        //   // symbol: "rect",
        //   // symbolSize: 8,
        //   itemStyle: {
        //     // color: "#FFC107",
        //     borderColor: "#fff",
        //     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        //       { offset: 0, color: "#fdea9c" },
        //       { offset: 0.5, color: "#ffd87d" },
        //       { offset: 1, color: "#fcc261" },
        //     ]),
        //   },
        //   lineStyle: {
        //     width: 3,
        //     type: "solid",
        //     shadowColor: "rgba(255,193,7,0.3)",
        //     shadowBlur: 8,
        //   },

        //   data: [
        //     6500, 8500, 8500, 8500, 7600, 8500, 8500, 8500, 8500, 8500, 7600,
        //     8500,
        //   ],
        // },
        {
          name: '综合计划金额',
          type: 'bar',
          stack: 'total',
          emphasis: {
            focus: 'series'
          },
          itemStyle: {
            borderColor: "#fff",
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: "#fdea9c" },
              { offset: 0.5, color: "#ffd87d" },
              { offset: 1, color: "#fcc261" },
            ]),
          },
          data: [
            6500, 8500, 8500, 8500, 7600, 8500, 8500, 8500, 8500, 8500, 7600,
            8500,
          ],
          barWidth: '50%', // 添加这一行来控制柱子宽度
        },
        // {
        //   name: "采购金额",
        //   type: "line",
        //   smooth: true,
        //   // symbol: "triangle",
        //   // symbolSize: 10,
        //   itemStyle: {
        //     //  color: "#66BB6A",
        //     borderColor: "#fff",
        //     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        //       { offset: 0, color: "#2da8a8" },
        //       { offset: 0.5, color: "#45c2cc" },
        //       { offset: 1, color: "#2fefff" },
        //     ]),
        //   },
        //   lineStyle: {
        //     width: 3,
        //     shadowColor: "rgba(102,187,106,0.3)",
        //     shadowBlur: 8,
        //   },
        //   data: [
        //     500, 2300, 760, 4000, 3000, 2000, 8500, 7600, 5000, 8500, 7600,
        //     8500,
        //   ],
        // },
        {
          name: '采购金额',
          type: 'bar',
          stack: 'total',
          emphasis: {
            focus: 'series'
          },
          itemStyle: {
            borderColor: "#fff",
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: "#2da8a8" },
              { offset: 0.5, color: "#45c2cc" },
              { offset: 1, color: "#2fefff" },
            ]),
          },
          data: [
            500, 2300, 760, 4000, 3000, 2000, 8500, 7600, 5000, 8500, 7600,
            8500,
          ],
          barWidth: '50%', // 添加这一行来控制柱子宽度
        },
        // 执行金额（原青色柱）
        // {
        //   name: "执行金额",
        //   type: "line",
        //   smooth: true,
        //   // symbol: "diamond",
        //   // symbolSize: 10,
        //   itemStyle: {
        //     // color: "#26C6DA",
        //     borderColor: "#fff",
        //     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        //       { offset: 0, color: "#b2b7b9" },
        //       { offset: 0.5, color: "#9aa3ab" },
        //       { offset: 1, color: "#83919e" },
        //     ]),
        //   },
        //   lineStyle: {
        //     width: 3,
        //     shadowColor: "rgba(38,198,218,0.5)",
        //     shadowBlur: 10,
        //   },
        //   data: [
        //     8500, 7500, 7600, 8500, 8500, 7600, 8500, 7600, 8500, 7600, 8500,
        //     6000,
        //   ],
        // },
        {
          name: '执行金额',
          type: 'bar',
          stack: 'total',
          emphasis: {
            focus: 'series'
          },
          itemStyle: {
            // color: "#26C6DA",
            borderColor: "#fff",
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: "#b2b7b9" },
              { offset: 0.5, color: "#9aa3ab" },
              { offset: 1, color: "#83919e" },
            ]),
          },
          data: [
            8500, 7500, 7600, 8500, 8500, 7600, 8500, 7600, 8500, 7600, 8500,
            6000,
          ],
          barWidth: '50%', // 添加这一行来控制柱子宽度
        }
        // 采购金额（原绿色柱）
      ],
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow",
        },
      },
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
  </script>
</body>

</html>